<template>
  <div class="snow-page">
    <div class="snow-inner-page">
      <a-form :model="formData.form" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }" ref="formRef">
        <a-row :gutter="16">
          <a-col :span="6">
            <a-form-item field="name" label="菜单名称">
              <a-input v-model="formData.form.name" placeholder="请输入菜单名称" allow-clear />
            </a-form-item>
          </a-col>
          <!-- <a-col :span="6">
            <a-form-item field="hide" label="显示状态">
              <a-select v-model="formData.form.hide" placeholder="请选择显示状态" allow-clear>
                <a-option value="1">停用</a-option>
                <a-option value="2">启用</a-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item field="disable" label="启用状态">
              <a-select v-model="formData.form.disable" placeholder="请选择启用状态" allow-clear>
                <a-option value="1">停用</a-option>
                <a-option value="2">启用</a-option>
              </a-select>
            </a-form-item>
          </a-col> -->
          <a-col :span="6">
            <a-space>
              <a-button type="primary">
                <template #icon>
                  <icon-search />
                </template>
                <template #default>查询</template>
              </a-button>
              <a-button @click="onReset">
                <template #icon>
                  <icon-refresh />
                </template>
                <template #default>重置</template>
              </a-button>
              <a-button type="primary" @click="onAdd">
                <template #icon>
                  <icon-PlusOutlined />
                </template>
                <template #default>新增</template>
              </a-button>
            </a-space>
          </a-col>
        </a-row>
      </a-form>
      <a-table :data="tableData" row-key="id" show-empty-tree :default-expanded-keys="[1]">
        <template #columns>
          <a-table-column title="菜单名称">
            <template #cell="{ record }">
              {{ record.name }}
            </template>
          </a-table-column>
          <!-- <a-table-column title="图标" align="center">
            <template #cell="{ record }">
              <MenuItemIcon :svg-icon="record.meta.svgIcon" :icon="record.meta.icon" />
            </template>
          </a-table-column> -->
          <a-table-column title="排序" align="center">
            <template #cell="{ record }">
              {{ record.sort }}
            </template>
          </a-table-column>
          <a-table-column title="显示" align="center">
            <template #cell="{ record }">
              <a-space>
                <a-tag bordered size="small" color="red" v-if="!record.hide">隐藏</a-tag>
                <a-tag bordered size="small" color="arcoblue" v-else>显示</a-tag>
              </a-space>
            </template>
          </a-table-column>
          <a-table-column title="启用状态" align="center">
            <template #cell="{ record }">
              <a-space>
                <a-tag bordered size="small" color="red" v-if="!record.disable">禁用</a-tag>
                <a-tag bordered size="small" color="arcoblue" v-else>启用</a-tag>
              </a-space>
            </template>
          </a-table-column>
          <a-table-column title="缓存状态" align="center">
            <template #cell="{ record }">
              <a-space>
                <a-tag bordered size="small" color="red" v-if="record.keepAlive">不缓存</a-tag>
                <a-tag bordered size="small" color="arcoblue" v-else>缓存</a-tag>
              </a-space>
            </template>
          </a-table-column>
          <a-table-column title="操作" align="center">
            <template #cell="{ record }">
              <a-space>
                <a-button size="mini" type="primary" @click="onEdit(record)" v-if="record.id != 1">修改</a-button>
                <a-button size="mini" type="primary" @click="Deletemenu(record)" v-if="record.children.length == 0"
                  status="danger">删除</a-button>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>


      <a-modal v-model:visible="visible" :footer="false" width="40%">
        <template #title>
          新增菜单
        </template>
        <div>
          <a-form ref="formRef" :model="form" @submit="handleSubmit">

            <a-form-item field="pid" label="上级菜单">
              <a-tree-select :data="treeData" :default-value="['1']" :fieldNames="{
                key: 'id',
                title: 'name',
                children: 'children'
              }" v-model="form.pid" placeholder="请选择菜单" />
            </a-form-item>
            <a-form-item field="name" label="菜单名称" :rules="[{ required: true, message: '菜单名称不能为空' }]">
              <a-input v-model="form.name" placeholder="请输入菜单名称" />
            </a-form-item>

            <a-form-item field="path" label="菜单路由" :rules="[{ required: true, message: '菜单路由不能为空' }]">
              <a-input v-model="form.path" placeholder="请输入菜单路由" />
            </a-form-item>
            <a-form-item field="component" label="组件地址" :rules="[{ required: true, message: '菜单路由不能为空' }]">
              <a-input v-model="form.component" placeholder="请输入组件地址 比如/home/index" />
            </a-form-item>
            <a-form-item field="disable" label="禁用状态">
              <a-switch type="round" v-model="form.disable" checked-value="1" unchecked-value="0">
                <template #checked>
                  启用
                </template>
                <template #unchecked>
                  禁用
                </template>
              </a-switch>
            </a-form-item>
            <a-form-item field="hide" label="显示状态">
              <a-switch type="round" v-model="form.hide" checked-value="1" unchecked-value="0">
                <template #checked>
                  显示
                </template>
                <template #unchecked>
                  不显示
                </template>
              </a-switch>
            </a-form-item>
            <a-form-item field="keepAlive" label="是否缓存">
              <a-switch type="round" v-model="form.keepAlive" checked-value="1" unchecked-value="0">
                <template #checked>
                  开启缓存
                </template>
                <template #unchecked>
                  不缓存
                </template>
              </a-switch>
            </a-form-item>
            <a-form-item field="switch" label="排序">
              <a-input-number v-model="form.sort" :style="{ width: '320px' }" placeholder="请输入排序" class="input-demo"
                :min="1" :max="100" />
            </a-form-item>
            <a-form-item>
              <a-space>
                <a-button html-type="submit">提交</a-button>
                <a-button @click="$refs.formRef.resetFields()">重置</a-button>
              </a-space>
            </a-form-item>
          </a-form>
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script setup lang="ts">
import MenuItemIcon from "@/layout/components/Menu/menu-item-icon.vue";
import dynamicRoutes from "@/mock/_data/system_menu";
import { Modal, Message } from "@arco-design/web-vue";
import { getMenuInfo, submitMenu, updateMenu, deleteMenu } from "@/api/modules/user/index"

// let tableData = computed(() => {
//   return dynamicRoutes[0].children;
// });
const formData = reactive({
  form: {
    name: "",
    hide: "",
    disable: ""
  }
});

const formRef = ref();
const onReset = () => {
  formRef.value.resetFields();
};

let tableData = ref([]);
const treeData = ref([]);
onMounted(() => {
  init();
});
async function init() {
  let res = await getMenuInfo();
  if (res.status == 2) {
    treeData.value = res.data;
    tableData.value = res.data;
  }
}

const form = reactive({
  pid: "",
  name: "",
  path: "",
  component: "",
  disable: '1',
  hide: '1',
  keepAlive: '0',
  redirect: "",
  svgIcon: "",
  sort: "",
  id: "",
})
function onAdd() {
  form.name = ""
  form.path = ""
  form.component = ""
  form.disable = '1'
  form.hide = '1'
  form.keepAlive = '0'
  form.redirect = ""
  form.svgIcon = ""
  form.sort = ""
  form.id = ""
  form.pid = ""
  visible.value = true
}
const visible = ref(false)
const handleSubmit = async ({ values, errors }) => {
  if (errors) {
    console.log('values:', values, '\nerrors:', errors)
    return
  }
  if (form.id) {
    let res = await updateMenu(values) as any
    if (res.status == 2) {
      Message.success("修改成功")
    } else {
      Message.error(res.statusMsg)
    }
  } else {
    let res = await submitMenu(values) as any
    if (res.status == 2) {
      Message.success("新增成功")
    } else {
      Message.error(res.statusMsg)
    }
  }
  init();
  visible.value = false
}

const Deletemenu = async (row) => {

  Modal.warning({
    title: "提示",
    content: "确定删除？",
    hideCancel: false,
    closable: true,
    onOk: async () => {
      try {
        let res = await deleteMenu(row.id) as any
        if (res.status == 2) {
          Message.success("删除成功")
        } else {
          Message.error(res.statusMsg)
        }
        init();
      } catch { }
    }
  });


}
const onEdit = (row) => {
  console.log("修改", row),
    form.name = row.name,
    form.path = row.path,
    form.component = row.component,
    form.disable = row.disable + '',
    form.hide = row.hide + '',
    form.keepAlive = row.keepAlive + '',
    form.redirect = form.redirect,
    form.svgIcon = row.svgIcon,
    form.sort = row.sort,
    form.pid = row.pid || '',
    form.id = row.id || '',
    visible.value = true
}

</script>

<style lang="scss" scoped></style>
